<template>
  <el-card class="account-container">
    <h1 :style="`font-size: var(--el-font-size-extra-large)`" style="font-size: 26px; color: #615f5f">管理员个人信息管理</h1>
    <el-divider />
    <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        status-icon
        label-width="120px"
        :rule="rules"
        class="demo-ruleForm"
    >
      <el-form-item label="用户名" prop="username">
        <el-input v-model="ruleForm.username" type="text" autocomplete="off" />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input
            v-model="ruleForm.password"
            type="password"
            autocomplete="off"
        />
      </el-form-item>
      <el-form-item label="电话" prop="phone">
        <el-input v-model="ruleForm.phone" type="text" autocomplete="off" />
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-select v-model="ruleForm.sex" placeholder="请选择性别">
          <el-option label="男" value="MALE" />
          <el-option label="女" value="FEMALE" />
          <el-option label="无选择" :value="null" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm"
        >提交修改</el-button
        >
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script setup>

import {onMounted, reactive, ref} from "vue";
import {useStore} from "vuex";
import {getAdmin, updateAdmin} from "@/api/admin";
import {ElMessage} from "element-plus";


const store = useStore();

const rules = reactive({
    username: [
      {required: 'true', message: '账户不能为空', trigger: 'blur'}
    ],
    password: [
      {required: 'true', message: '密码不能为空', trigger: 'blur'}
    ],
    phone: [
      {required: 'true', message: '电话不能为空', trigger: 'blur'}
    ],
    sex: [
      {required: 'true', message: '性别不能为空', trigger: 'blur'}
    ]
});

// 消息提示框
const openSuccess = () => {
  ElMessage({
    showClose: true,
    message: '信息修改成功',
    type: 'success',
  })
}

const ruleForm = ref({

})
const submitForm = () => {
  updateAdmin(ruleForm.value);
  openSuccess();
}

onMounted(() => {
  getAdmin({id : store.getters.getId}).then((res) => {
    ruleForm.value = res.data;
  });
})

</script>
<style scoped>
.course {
  font-weight: bold;
  display: inline-block;
}
.course li {
  line-height: 36px;
  color: #409eff;
  cursor: pointer;
}
</style>